<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <style>
        .fade-enter-active, .fade-leave-active {
            transition: opacity 3s
        }

        .fade-enter, .fade-leave-to {
            opacity: 0
        }
    </style>
    </head>
    <body>
        <div id="app">
            <button v-on:click="show = !show">{{ show ? '隐藏' : '显示'}}</button>
            <transition name="fade">
                <p v-show="show">hello !</p>
            </transition>
        </div>
    </body>
    <script src="../../js/vue.js"></script>
    <script type = "text/javascript">
        var vm = new Vue({
            el: '#app',
            data: {
                show:true
            },
            methods : {
            }
        });
    </script>
</html>
